<template>
	<view class="main-box">
		<view class="navigator-bar" :style="{'padding-top': safeTop + 'px'}">
			<image class="back-img" src="/static/backArrow2.png" @click="back()"></image>
			<text class="page-title">{{ title }}</text>
			<view class="control-button">个人主页</view>
		</view>
		<scroll-view class="chat-scroll" scroll-y="true" :scroll-top="scrollTop" @click="cancelControl()"
			:style="{'height': `calc(100vh - ${safeTop}px - ${safeBottom}px - 186rpx - ${bottomHeight}rpx)`}">
			<view class="chat-list">
				<view class="chat-item" v-for="chat of chatData">
					<view class="other-chat" v-if="chat.type === 0">
						<image class="avatar-img" :src="chat.fromAvatar"></image>
						<view class="content-box">
							<view class="name-text">{{ chat.fromName }}</view>
							<view class="content-text">{{ chat.content }}</view>
						</view>
					</view>
					<view class="mine-chat" v-if="chat.type === 1">
						<view class="content-box">
							<view class="name-text">{{ userInfo.nickName }}</view>
							<view class="content-text">{{ chat.content }}</view>
						</view>
						<image class="avatar-img" :src="userInfo.avatar"></image>
					</view>
				</view>
				<view style="height: 32rpx;"></view>
			</view>
		</scroll-view>
		<view class="control-box" :style="{'padding-bottom': safeBottom + 'px'}">
			<view class="input-row">
				<view class="input-box" :style="{'width': chatContent ? '460rpx' : '550rpx'}">
					<input class="chat-input" placeholder="说点什么..." v-model="chatContent"
						:style="{'width': chatContent ? '428rpx' : '518rpx'}" />
				</view>
				<image class="emoji-img" src="/static/chartEmoji.png" @click="openEmoji()"></image>
				<image class="add-img" src="/static/chartAdd.png" @click="openAdd()" v-if="!chatContent"></image>
				<view class="send-button" v-if="chatContent" @click="sendMessage()">发送</view>
			</view>
			<view class="add-box" v-if="controlType === 1">
				<view class="add-item">
					<view class="img-box">
						<image class="add-img" src="/static/chartPhoto.png"></image>
					</view>
					<view class="add-text">相册</view>
				</view>
				<view class="add-item">
					<view class="img-box">
						<image class="add-img" src="/static/chartShoot.png"></image>
					</view>
					<view class="add-text">拍摄</view>
				</view>
			</view>
			<view class="emoji-box" v-if="controlType === 2">
				<emoji @chooseEmoji="chooseEmoji"></emoji>
			</view>
		</view>
	</view>
</template>

<script>
	import emoji from '@/components/emoji.vue'

	export default {
		data() {
			return {
				title: '聊天名',
				safeTop: 0,
				safeBottom: 0,
				bottomHeight: 0,
				chatContent: '',
				controlType: 0,
				userInfo: {},
				lastTime: '',
				scrollTop: 0,
				chatData: [{
						type: 0,
						fromName: 'test1',
						fromAvatar: "http://icc.fukongdao8.com/profile/upload/2022/10/29/453b6784-926d-43cd-99d7-940ea61f2f3d.jpg",
						content: '拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄',
					},
					{
						type: 0,
						fromName: 'test1',
						fromAvatar: "http://icc.fukongdao8.com/profile/upload/2022/10/29/453b6784-926d-43cd-99d7-940ea61f2f3d.jpg",
						content: '拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄',
					},
					{
						type: 1,
						fromName: 'test1',
						fromAvatar: "http://icc.fukongdao8.com/profile/upload/2022/10/29/453b6784-926d-43cd-99d7-940ea61f2f3d.jpg",
						content: '拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄拍摄',
					}
				]
			};
		},
		components: {
			emoji
		},
		onLoad() {
			this.safeTop = this.$safeTop;
			this.safeBottom = this.$safeBottom;
			this.userInfo = this.$userInfo;
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			openEmoji() {
				this.bottomHeight = 360;
				this.controlType = 2;
				setTimeout(() => this.scrollToBottom(), 100);
			},
			openAdd() {
				this.bottomHeight = 228;
				this.controlType = 1;
				setTimeout(() => this.scrollToBottom(), 100);
			},
			cancelControl() {
				this.controlType = 0;
				this.bottomHeight = 0;
				setTimeout(() => this.scrollToBottom(), 100);
			},
			sendMessage() {
				if (this.bottomHeight > 0) {
					this.cancelControl();
				}
				this.chatData.push({
					type: 1,
					fromName: this.userInfo.nickName,
					fromAvatar: this.userInfo.avatart,
					content: this.chatContent
				})
				this.chatContent = '';
				setTimeout(() => this.scrollToBottom(), 100);
			},
			scrollToBottom() {
				let query = uni.createSelectorQuery()
				query.select('.chat-scroll').boundingClientRect();
				query.select('.chat-list').boundingClientRect();
				query.exec((res) => {
					if (res[1].height > res[0].height) {
						this.scrollTop = res[1].height - res[0].height;
					} else if (this.scrollTop !== 0) {
						this.scrollTop = 0;
					}
				})
			},
			chooseEmoji(emoji) {
				this.chatContent += emoji;
			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 100vw;
		height: 100vh;
		background-color: #F6F7F9;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;

		.navigator-bar {
			width: 100vw;
			height: 86rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.back-img {
				width: 24rpx;
				height: 40rpx;
				margin-left: 42rpx;
				z-index: 999;
			}

			.page-title {
				font-size: 38rpx;
				font-weight: bold;
				color: #222222;
				position: absolute;
				width: 100vw;
				line-height: 38rpx;
				text-align: center;
			}

			.control-button {
				width: 160rpx;
				height: 64rpx;
				border-radius: 32rpx;
				border: 2rpx solid #E3E7EB;
				font-size: 28rpx;
				font-weight: 400;
				color: #222222;
				line-height: 64rpx;
				text-align: center;
				margin-right: 32rpx;
			}
		}

		.chat-scroll {
			width: 100vw;

			.chat-list {
				.chat-item {
					padding-top: 32rpx;

					.avatar-img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 80rpx;
					}

					.name-text {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						margin-bottom: 8rpx;
					}

					.other-chat {
						display: flex;
						margin-left: 32rpx;

						.content-box {
							margin-left: 16rpx;

							.content-text {
								max-width: 420rpx;
								padding: 20rpx 38rpx;
								background: #FFFFFF;
								border-radius: 0 24rpx 24rpx 24rpx;
								word-wrap: break-word;
							}
						}
					}

					.mine-chat {
						display: flex;
						justify-content: flex-end;
						width: calc(100% - 32rpx);
						padding-right: 32rpx;

						.content-box {
							margin-right: 16rpx;
							text-align: end;

							.content-text {
								text-align: start;
								max-width: 420rpx;
								padding: 20rpx 38rpx;
								background: #C6DDFF;
								border-radius: 24px 0 24rpx 24rpx;
								word-wrap: break-word;
							}
						}
					}
				}
			}
		}

		.control-box {
			width: 100vw;
			background-color: #FFFFFF;

			.input-row {
				width: 100vw;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.input-box {
					width: 460rpx;
					height: 80rpx;
					background-color: #F6F7F9;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					margin-left: 32rpx;

					.chat-input {
						margin-left: 16rpx;
					}
				}

				.emoji-img {
					width: 44rpx;
					height: 44rpx;
				}

				.add-img {
					width: 44rpx;
					height: 44rpx;
					margin-right: 32rpx;
				}

				.send-button {
					width: 120rpx;
					height: 80rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;
					background-color: #FF5E2E;
					line-height: 80rpx;
					text-align: center;
					border-radius: 20rpx;
					margin-right: 32rpx;
				}
			}

			.add-box {
				display: flex;
				align-items: center;
				padding: 32rpx;
				border-top: 2rpx solid #F6F7F9;

				.add-item {
					margin-right: 32rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					.img-box {
						width: 120rpx;
						height: 120rpx;
						border-radius: 24rpx;
						background-color: #F6F7F9;
						display: flex;
						align-items: center;
						justify-content: center;

						.add-img {
							width: 44rpx;
							height: 40rpx
						}
					}

					.add-text {
						font-size: 28rpx;
						margin-top: 16rpx;
						color: #999999;
						line-height: 28rpx;
					}
				}
			}

			.emoji-box {}
		}
	}
</style>
